<template>
  <div class="cotegory">
    <search></search>
    <view class="cate">
      <scroll-view scroll-y class="cate-left">
        <block v-for="(item,index) in cateNavList" :key="index">
          <view
            class="nav-item"
            :class="{active:index===tapIndex}"
            @tap="changeIndex(index)"
          >{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <scroll-view scroll-y scroll-top="0" class="cate-right">
        <block v-for="(item,index) in contentList" :key="index">
          <view class="floor-item">
            <view class="floor-item-tytle">{{item.cat_name}}</view>
            <view class="floor-item-content">
              <block v-for="(item2,index2) in item.children" :key="index2">
                <view class="content-item" @tap="toGoodList(item2.cat_name)">
                  <image :src="'https://autumnfish.cn/wx/'+item2.cat_icon" alt></image>
                  <view class="brandName">{{item2.cat_name}}</view>
                </view>
              </block>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </div>
</template>
<script>
// import request from "@/utils/request.js";
import search from "@/components/search";
import {getCategoriesData} from '@/api'
export default {
  components: {
    search
  },
  data() {
    return {
      cateNavList: [],
      contentList: [],
      tapIndex: 0
    };
  },
  methods: {
    changeIndex(index) {
      this.tapIndex = index;
      this.contentList = this.cateNavList[index].children;
    },
    toGoodList(name) {
      wx.navigateTo({
        url: '/pages/goods_list/main'+'?keyword='+ name
      }); 
    }
  },
  mounted() {
    // request("https://www.zhengzhicheng.cn/api/public/v1/categories").then(
    //   res => {
    //     let { message } = res.data;
    //     this.cateNavList = message;
    //     this.contentList = message[0].children;
    //   }
    // );
    "https://autumnfish.cn/wx/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
    "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
    getCategoriesData().then(res=>{
      console.log(res)
      let { message } = res.data;
      this.cateNavList = message;
      this.contentList = message[0].children;
    })
  }
};
</script>
<style lang="scss" scoped>
.cate {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 88rpx;
  background: pink;
  display: flex;
  &-left {
    width: 198rpx;
    background: #eee;
    .nav-item {
      position: relative;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      border-bottom: 1px solid #ccc;
      font-size: 32rpx;
    }
  }
  .active {
    background: #fff;
    color: red;
    &::before {
      content: "";
      position: absolute;
      top: 20rpx;
      bottom: 20rpx;
      width: 9rpx;
      left: 0;
      background: red;
    }
  }
  &-right {
    flex: 1;
    background: #fff;
    .floor-item {
      width: 100%;
      &-tytle {
        font-size: 36rpx;
        text-align: center;
        padding: 32rpx 0;
        color: #666;
        &::before,
        &::after {
          content: "/";
          color: #ccc;
          padding: 0 50rpx;
        }
      }
      &-content {
        display: flex;
        flex-wrap: wrap;
        .content-item {
          width: 33.33%;
          text-align: center;
          margin-top: 32rpx;
          image {
            width: 120rpx;
            height: 100rpx;
          }
          .brandName {
            // margin-top: 28rpx;
            font-size: 28rpx;
          }
        }
      }
    }
  }
}
</style>
